<template>
    <div class="data">
        <div v-for="item in content" :key="item.name" class="item">
            <div class="myname">
                {{ item.name }}
                <el-tooltip v-if="item.desc" class="box-item" placement="top">
                    <template #content>
                        <div class="desc">{{ item.desc }}</div>
                    </template>
                    <el-icon style="margin-left: 4px; color: #fff; background: #969696; border-radius: 50%">
                        <QuestionFilled />
                    </el-icon>
                </el-tooltip>
            </div>
            <div class="num">{{ numFormat(data[item.key]) }}{{ item.icon }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import { numFormat } from '@/utils/utils';
const props = defineProps(['totalData']);
const data = ref({});
const content = [
    { name: '查看人数', key: 'view_num', desc: '进入活动的人数（包含未授权用户）' },
    { name: '参与人数', key: 'part_num', desc: '参与当前活动的人数 （包含客户）' },
    {
        name: '流失客户数',
        key: 'lost_num',
        desc: '添加引流员工后又删除的新客户'
    },
    {
        name: '净增客户数',
        key: 'add_num',
        desc: '添加引流员工并且没有删除的新客户'
    },
    {
        name: '留存率',
        key: 'retain_per',
        icon: '%',
        desc: '净增客户数/（流失客户数+净增客户数）'
    },
    {
        name: '跳出率',
        key: 'lost_per',
        icon: '%',
        desc: '查看人数-净增客户数/查看人数'
    }
];
watch(
    () => props.totalData,
    val => {
        data.value = val;
    }
);
</script>

<style lang="scss" scoped>
:deep(.el-card__body) {
    padding: 0;
}

.totalCard {
    padding: 30px 0;
    margin-top: 16px;
    border-bottom: 2px solid #ffc69e;

    // box-sizing: border-box;
    .title {
        padding-bottom: 16px;
        border-bottom: 1px solid #eaeaea;
    }
}

.data {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    padding: 32px 24px;
    margin-top: 16px;
    border: 1px solid #e4e7ed;

    // box-sizing: border-box;
    background-color: #fff;
    border-radius: 4px;

    .item {
        text-align: left;

        .myname {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-weight: 400;
            color: #666;
        }

        .num {
            padding-top: 8px;
            font-size: 30px;
            font-family: HelveticaNeue-Medium, HelveticaNeue;
            font-weight: 500;
            color: #33302d;
            line-height: 36px;
        }
    }
}

.desc {
    max-width: 412px;
    white-space: normal;
    word-break: break-all;
    word-wrap: break-word;
    font-size: 12px;
    font-family: PingFangSC-Regular, 'PingFang SC';
    font-weight: 400;
    line-height: 20px;
}
</style>
